<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>消息中心 - 雁农冷链平台</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../static/sa.css">
	<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
	<style>
		.message-container {
			padding: 20px;
			background: #f5f5f5;
			min-height: calc(100vh - 40px);
		}
		.message-header {
			background: white;
			border-radius: 8px;
			padding: 20px;
			margin-bottom: 20px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.message-stats {
			display: flex;
			gap: 30px;
		}
		.stat-item {
			text-align: center;
		}
		.stat-number {
			font-size: 24px;
			font-weight: bold;
			color: #409eff;
			margin-bottom: 5px;
		}
		.stat-label {
			color: #666;
			font-size: 14px;
		}
		.message-tabs {
			background: white;
			border-radius: 8px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
			overflow: hidden;
		}
		.tab-header {
			display: flex;
			border-bottom: 1px solid #eee;
		}
		.tab-item {
			padding: 15px 25px;
			cursor: pointer;
			border-bottom: 3px solid transparent;
			transition: all 0.3s;
			position: relative;
		}
		.tab-item.active {
			color: #409eff;
			border-bottom-color: #409eff;
			background: #f8f9ff;
		}
		.tab-item:hover {
			background: #f5f5f5;
		}
		.tab-badge {
			position: absolute;
			top: 8px;
			right: 8px;
			background: #f56c6c;
			color: white;
			border-radius: 10px;
			padding: 2px 6px;
			font-size: 12px;
			min-width: 16px;
			text-align: center;
		}
		.message-list {
			padding: 20px;
			max-height: 600px;
			overflow-y: auto;
		}
		.message-item {
			display: flex;
			padding: 15px;
			border-bottom: 1px solid #f0f0f0;
			transition: all 0.3s;
			cursor: pointer;
			position: relative;
		}
		.message-item:hover {
			background: #f8f9ff;
		}
		.message-item.unread {
			background: #fafbff;
			border-left: 4px solid #409eff;
		}
		.message-icon {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 15px;
			font-size: 18px;
			color: white;
		}
		.icon-system { background: #409eff; }
		.icon-order { background: #67c23a; }
		.icon-logistics { background: #e6a23c; }
		.icon-warning { background: #f56c6c; }
		.message-content {
			flex: 1;
		}
		.message-title {
			font-weight: bold;
			color: #333;
			margin-bottom: 5px;
			font-size: 16px;
		}
		.message-desc {
			color: #666;
			font-size: 14px;
			line-height: 1.4;
			margin-bottom: 8px;
		}
		.message-time {
			color: #999;
			font-size: 12px;
		}
		.message-actions {
			display: flex;
			gap: 10px;
			align-items: center;
		}
		.action-btn {
			padding: 5px 10px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 12px;
			transition: all 0.3s;
		}
		.btn-read {
			background: #e1f3d8;
			color: #67c23a;
		}
		.btn-read:hover {
			background: #67c23a;
			color: white;
		}
		.btn-delete {
			background: #fde2e2;
			color: #f56c6c;
		}
		.btn-delete:hover {
			background: #f56c6c;
			color: white;
		}
		.empty-state {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
		.empty-icon {
			font-size: 64px;
			color: #ddd;
			margin-bottom: 20px;
		}
		.batch-actions {
			padding: 15px 20px;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.batch-btn {
			padding: 8px 16px;
			border: 1px solid #ddd;
			background: white;
			border-radius: 4px;
			cursor: pointer;
			font-size: 14px;
			margin-right: 10px;
			transition: all 0.3s;
		}
		.batch-btn:hover {
			border-color: #409eff;
			color: #409eff;
		}
		.unread-dot {
			position: absolute;
			top: 15px;
			right: 15px;
			width: 8px;
			height: 8px;
			background: #f56c6c;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div id="app" class="message-container">
		<!-- 消息统计 -->
		<div class="message-header">
			<h2 style="margin: 0; color: #333;">消息中心</h2>
			<div class="message-stats">
				<div class="stat-item">
					<div class="stat-number">{{ unreadCount }}</div>
					<div class="stat-label">未读消息</div>
				</div>
				<div class="stat-item">
					<div class="stat-number">{{ totalCount }}</div>
					<div class="stat-label">总消息数</div>
				</div>
				<div class="stat-item">
					<div class="stat-number">{{ todayCount }}</div>
					<div class="stat-label">今日新增</div>
				</div>
			</div>
		</div>
		
		<!-- 消息列表 -->
		<div class="message-tabs">
			<!-- 标签页头部 -->
			<div class="tab-header">
				<div class="tab-item" :class="{active: activeTab === 'all'}" @click="activeTab = 'all'">
					全部消息
					<span class="tab-badge" v-if="getTabCount('all') > 0">{{ getTabCount('all') }}</span>
				</div>
				<div class="tab-item" :class="{active: activeTab === 'system'}" @click="activeTab = 'system'">
					系统通知
					<span class="tab-badge" v-if="getTabCount('system') > 0">{{ getTabCount('system') }}</span>
				</div>
				<div class="tab-item" :class="{active: activeTab === 'order'}" @click="activeTab = 'order'">
					订单消息
					<span class="tab-badge" v-if="getTabCount('order') > 0">{{ getTabCount('order') }}</span>
				</div>
				<div class="tab-item" :class="{active: activeTab === 'logistics'}" @click="activeTab = 'logistics'">
					物流消息
					<span class="tab-badge" v-if="getTabCount('logistics') > 0">{{ getTabCount('logistics') }}</span>
				</div>
				<div class="tab-item" :class="{active: activeTab === 'warning'}" @click="activeTab = 'warning'">
					预警消息
					<span class="tab-badge" v-if="getTabCount('warning') > 0">{{ getTabCount('warning') }}</span>
				</div>
			</div>
			
			<!-- 批量操作 -->
			<div class="batch-actions">
				<div>
					<button class="batch-btn" @click="markAllRead">全部标记已读</button>
					<button class="batch-btn" @click="deleteRead">删除已读</button>
					<button class="batch-btn" @click="refreshMessages">刷新消息</button>
				</div>
				<div style="color: #666; font-size: 14px;">
					共 {{ filteredMessages.length }} 条消息
				</div>
			</div>
			
			<!-- 消息列表 -->
			<div class="message-list">
				<div v-if="filteredMessages.length === 0" class="empty-state">
					<div class="empty-icon">📭</div>
					<div>暂无消息</div>
				</div>
				<div v-else>
					<div v-for="message in filteredMessages" :key="message.id" 
						 class="message-item" :class="{unread: !message.read}"
						 @click="viewMessage(message)">
						<div class="message-icon" :class="'icon-' + message.type">
							<i :class="getTypeIcon(message.type)"></i>
						</div>
						<div class="message-content">
							<div class="message-title">{{ message.title }}</div>
							<div class="message-desc">{{ message.content }}</div>
							<div class="message-time">{{ formatTime(message.time) }}</div>
						</div>
						<div class="message-actions" @click.stop>
							<button v-if="!message.read" class="action-btn btn-read" @click="markRead(message)">标记已读</button>
							<button class="action-btn btn-delete" @click="deleteMessage(message)">删除</button>
						</div>
						<div v-if="!message.read" class="unread-dot"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="../../static/kj/vue.min.js"></script>
	<script src="../../static/kj/element-ui/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					activeTab: 'all',
					messages: [
						{
							id: 1,
							type: 'system',
							title: '系统维护通知',
							content: '系统将于今晚22:00-24:00进行维护升级，期间可能影响部分功能使用，请提前做好准备。',
							time: new Date(Date.now() - 2 * 60 * 60 * 1000),
							read: false
						},
						{
							id: 2,
							type: 'order',
							title: '订单状态更新',
							content: '您的订单 #202401150001 已发货，预计2-3个工作日内送达，请注意查收。',
							time: new Date(Date.now() - 4 * 60 * 60 * 1000),
							read: false
						},
						{
							id: 3,
							type: 'logistics',
							title: '运输进度通知',
							content: '货物已到达中转站，当前位置：北京市朝阳区物流园区，预计明日上午送达目的地。',
							time: new Date(Date.now() - 6 * 60 * 60 * 1000),
							read: true
						},
						{
							id: 4,
							type: 'warning',
							title: '温度异常预警',
							content: '运输车辆 京A12345 冷藏温度超出正常范围，当前温度：8°C，请及时处理。',
							time: new Date(Date.now() - 8 * 60 * 60 * 1000),
							read: false
						},
						{
							id: 5,
							type: 'system',
							title: '功能更新提醒',
							content: '平台新增物流时效查询功能，您可以实时查看各线路的运输时效统计数据。',
							time: new Date(Date.now() - 24 * 60 * 60 * 1000),
							read: true
						},
						{
							id: 6,
							type: 'order',
							title: '订单确认通知',
							content: '您提交的采购订单已通过审核，订单号：#202401140002，请及时安排后续事宜。',
							time: new Date(Date.now() - 48 * 60 * 60 * 1000),
							read: true
						}
					]
				}
			},
			computed: {
				filteredMessages() {
					if (this.activeTab === 'all') {
						return this.messages;
					}
					return this.messages.filter(msg => msg.type === this.activeTab);
				},
				unreadCount() {
					return this.messages.filter(msg => !msg.read).length;
				},
				totalCount() {
					return this.messages.length;
				},
				todayCount() {
					const today = new Date();
					today.setHours(0, 0, 0, 0);
					return this.messages.filter(msg => new Date(msg.time) >= today).length;
				}
			},
			methods: {
				getTabCount(type) {
					if (type === 'all') {
						return this.unreadCount;
					}
					return this.messages.filter(msg => msg.type === type && !msg.read).length;
				},
				getTypeIcon(type) {
					const icons = {
						system: 'el-icon-bell',
						order: 'el-icon-document',
						logistics: 'el-icon-truck',
						warning: 'el-icon-warning'
					};
					return icons[type] || 'el-icon-message';
				},
				formatTime(time) {
					const now = new Date();
					const msgTime = new Date(time);
					const diff = now - msgTime;
					
					if (diff < 60 * 1000) {
						return '刚刚';
					} else if (diff < 60 * 60 * 1000) {
						return Math.floor(diff / (60 * 1000)) + '分钟前';
					} else if (diff < 24 * 60 * 60 * 1000) {
						return Math.floor(diff / (60 * 60 * 1000)) + '小时前';
					} else {
						return msgTime.toLocaleDateString() + ' ' + msgTime.toLocaleTimeString().slice(0, 5);
					}
				},
				viewMessage(message) {
					if (!message.read) {
						message.read = true;
					}
					this.$message.info('查看消息详情功能开发中...');
				},
				markRead(message) {
					message.read = true;
					this.$message.success('已标记为已读');
				},
				deleteMessage(message) {
					this.$confirm('确定要删除这条消息吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						const index = this.messages.findIndex(msg => msg.id === message.id);
						if (index > -1) {
							this.messages.splice(index, 1);
							this.$message.success('删除成功');
						}
					}).catch(() => {});
				},
				markAllRead() {
					this.messages.forEach(msg => msg.read = true);
					this.$message.success('全部消息已标记为已读');
				},
				deleteRead() {
					this.$confirm('确定要删除所有已读消息吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						const beforeCount = this.messages.length;
						this.messages = this.messages.filter(msg => !msg.read);
						const deletedCount = beforeCount - this.messages.length;
						this.$message.success(`已删除 ${deletedCount} 条已读消息`);
					}).catch(() => {});
				},
				refreshMessages() {
					this.$message.success('消息列表已刷新');
					// 这里可以添加实际的刷新逻辑
				}
			}
		});
	</script>
</body>
</html>